<div>
	<yu-panel title="作业模板管理">
		<yu-row :gutter="24">
			<yu-col :span="5">
				<div class="tree-custom-jobtemplate">
					<yu-button-group>
						<el-button class="btn" @click="createTreeFn" :disabled="!addClassFnButton">新增</el-button>
						<el-button class="btn" @click="updateTreeFn" :disabled="!updateClassFnButton">修改</el-button>
						<el-button class="btn" @click="deleteTreeFn" :disabled="!deleteClassFnButton">删除</el-button>
					</yu-button-group>
				</div>
				<yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName"
				 data-pid="parentId" :data-async="async" data-root="0000" icon="iconPath" style="margin-right: 5px">
				</yu-xtree>
			</yu-col>
			<yu-col :span="19">
				<yu-xform related-table-name="refTable" form-type="search" v-model="searchFormdata">
					<yu-xform-group :column="4">
						<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
						<yu-xform-item label="模版代码" placeholder="作业模版代码" ctype="input" name="actionCode"></yu-xform-item>
						<yu-xform-item label="模版名称" placeholder="作业模版名称" ctype="input" name="actionName"></yu-xform-item>
					</yu-xform-group>
				</yu-xform>
				<yu-toolBar>
					<yu-button @click="addFn" v-if="isNodeLeaf&&addFnButton">新增</yu-button>
					<yu-button @click="modifyFn" v-if="updateFnButton">修改</yu-button>
					<yu-button @click="deleteFn" v-if="deleteFnButton">删除</yu-button>
				</yu-toolBar>

				<!--	<el-table-x ref="refTable" :data-url="dataUrl" :pageable="true" :radiobox="true" :table-columns="tableColumns" @custom-detail-click="viewDataFn">
				</el-table-x>-->
				<div ref="tableBox" style="overflow: auto;">
					<yu-xtable :height="tbHeight" ref="refTable" row-number :data-url="dataUrl"   selection-type="radio" :pageable="true">
						<yu-xtable-column label="系统名称" prop="appName" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column label="模版代码" prop="actionCode" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="viewDataFn(scope.row)">{{ scope.row.actionCode }}</a>
							</template>
						</yu-xtable-column>
						<yu-xtable-column label="模版名称" prop="actionName" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column label="目录路径" prop="folderPath" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column label="作业类型" data-code="USE_TASK_JOB_TYPE"   prop="typeCode"></yu-xtable-column>
					</yu-xtable>
				</div>
				<yu-xdialog :title="viewTitle" :visible.sync="dialogVisible" width="800px">
					<el-tabs type="border-card" v-model="activeTabName">
						<el-tab-pane label="基本信息" name="basicInfo" :disabled="true">
							<yu-xform ref="refForm" v-model="formdata" label-width="140px" :rules="rules">
								<yu-xform-group>
									<yu-xform-item ctype="input" name="folderCode" hidden></yu-xform-item>
									<yu-xform-item ctype="input" name="appCode" label="系统编号" disabled></yu-xform-item>
									<yu-xform-item ctype="input" name="appName" label="系统名称" disabled></yu-xform-item>
									<yu-xform-item label="作业代码" ctype="input" maxlength="64" name="actionCode" rules="required" :disabled="isReadOnly"></yu-xform-item>
									<yu-xform-item label="作业名称" ctype="input" maxlength="120" name="actionName" rules="required"></yu-xform-item>
									<yu-xform-item label="作业类型" ctype="select" name="typeCode" data-code="USE_TASK_JOB_TYPE" @change="selectTypeCodeFn" rules="required"></yu-xform-item>
									<yu-xform-item label="所属目录" ctype="input" name="folderName" rules="required" readOnly icon='search' @click="selectFolder"></yu-xform-item>
									<yu-xform-item label="代理名称" ctype="select" name="agentCode" :options="agentIds" rules="required" :disabled="disabledOpr" :filterable="true"></yu-xform-item>
									<yu-xform-item label="最大成功返回值" ctype="input"  name="success" :rules="paramValueValidate"></yu-xform-item>
									<yu-xform-item label="多实例运行" ctype="radio" name="multiFlag" data-code="YESNO" rules="required" :disabled="disabledOpr"></yu-xform-item>
									<yu-xform-item label="是否强制中断" ctype="radio" name="intrFlag" data-code="YESNO" rules="required" :disabled="disabledOpr"></yu-xform-item>
									<yu-xform-item label="备注" ctype="textarea" name="remark" maxlength="240" :colspan="24" :rows="3"></yu-xform-item>
								</yu-xform-group>
							</yu-xform>
							<el-form-x ref="initTabButton" :buttons="firstStepFormButtons" label-width="120px"></el-form-x>
						</el-tab-pane>

						<el-tab-pane label="执行信息" name="execInfo" :disabled="true">
							<el-form-x ref="refExecForm" v-model="formExecData" :group-fields="execInfoFormFields" label-width="110px">
							</el-form-x>
							<el-form ref="paramsTabForm" label-width="100px">
								<el-form-item label="参数信息:" require="true">
									<yu-toolBar>
										<el-button @click="addParamData">新增</el-button>
										<el-button @click="deleteParamData">删除</el-button>
									</yu-toolBar>
									<yu-xtable selection-type="checkbox" ref="paramsTab" :pageable="false" :data="paramcfgDatas" style="width: 100%" max-height="250">
										<yu-xtable-column prop="paramNo" ctype="input" maxlength="100" label="参数编号">
										</yu-xtable-column>
										<yu-xtable-column prop="paramName" ctype="input" maxlength="64" label="参数名称">
										</yu-xtable-column>
										<!--   ctype="yufp-select-params" :params="nodeTemp"-->
									<!-- 	<yu-xtable-column prop="paramValue" ctype="input" maxlength="64" label="参数值">
										</yu-xtable-column> -->
										<yu-xtable-column prop="paramValue" ctype="yufp-select-params" maxlength="250" :params="paramObj" label="参数值" @select-fn="getSelectedData">
										</yu-xtable-column>
							<!-- 			<yu-xtable-column label="文件路径" prop="pathName" maxlength="250" ctype="yufp-select-params" :params="paramObj" rules="required" @select-fn="getSelectedData">
										</yu-xtable-column> -->
										<yu-xtable-column prop="remark" ctype="input" maxlength="240" label="备注">
										</yu-xtable-column>
									</yu-xtable>
								</el-form-item>
							</el-form>
							<div class="yu-grpButton">
								<yu-button @click="lastStep">上一步</yu-button>
								<yu-button v-show="saveBtnShow" type="primary" v-if="!isView" @click="saveFn" :disabled="isView">保存</yu-button>
								<yu-button v-show="saveBtnShow" type="info" v-if="isView" @click="saveFn" :disabled="isView">保存</yu-button>
								<yu-button @click="cancelFn">关闭</yu-button>
							</div>
						</el-tab-pane>

					</el-tabs>
				</yu-xdialog>
			</yu-col>
		</yu-row>
	</yu-panel>
	<yu-xdialog :title="viewClassTitle" :visible.sync="classDialogVisible" width="700px">
		<el-form-x label-width="110px" ref="refClassForm" :group-fields="classFields" :buttons="classButtons" />
	</yu-xdialog>
	<yu-xdialog title="选择目录" :visible.sync="chooseFolderDialogVisible" width="300px">
		<yu-xtree :show-checkbox="true" ref="refFolderTree" :height="folderHeight" @check-change="folderNodeClickFn" :default-checked-keys="defaultFolderKey"
		 :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName" data-pid="parentId" :data-async="async" default-expand-all
		 check-strictly :data-root="folderRoot">
		</yu-xtree>
		<div class="yu-grpButton">
			<yu-button v-show="saveBtnShow" type="primary" @click="selectFolderSaveFn">确认</yu-button>
			<yu-button v-show="cancelBtnShow" @click="selectFolderCancelFn">取消</yu-button>
		</div>
	</yu-xdialog>

</div>

<style>
	.tree-custom-jobtemplate {
		border: 1px solid #d1dbe5;
		margin-top: 10px;
		margin-right: 5px;
		padding: 0 !important;
	}

	.tree-custom-jobtemplate .yu-toolBar {
		padding: 0;
	}

	.tree-custom-jobtemplate .yu-toolBar>h2 {
		margin: 0;
		padding: 0;
		padding-left: 15px;
	}

	.tree-custom-jobtemplate .el-button-group {
		display: block;
	}

	.tree-custom-jobtemplate .el-button-group .el-button {
		border-width: 0;
		border-left-width: 1px;
		border-radius: 0;
		width: 33.3333334%;
	}

	.tree-custom-jobtemplate .el-button-group .el-button:first-child {
		border-left-width: 0;
	}

	.tree-custom-jobtemplate .el-button-group .el-button:last-child {
		border-right-width: 0;
	}

	.tree-custom-jobtemplate .el-tree {
		margin-top: 0;
		margin-right: 0;
		border-width: 0;
		border-top-width: 1px;
	}
</style>